<!-- 首页页面 -->
<template>
  <div class="bg">
    <div class="body">
      <div class="title">为退役军人提供全方位服务</div>
      <div class="text">
        我们致力于帮助退役军人实现顺利转型，提供优待政策咨询、就业推荐、福利申请等一站式服务
      </div>
    </div>
  </div>
  <div class="work">
    <div class="small-title">核心业务</div>
    <div class="workCard">
      <el-card style="max-width: 480px; cursor: pointer" @click="(router.push('/news'))">
        <img src="../../assets/news.png" style="width: 100%" />
        <div class="workTitle">新闻政策</div>
        <div class="workText">
          及时了解最新的退役军人优待政策，享受专属福利待遇
        </div>
      </el-card>
      <el-card style="max-width: 480px; cursor: pointer" @click="(router.push('/works'))">
        <img src="../../assets/works.png" style="width: 100%" />
        <div class="workTitle">就业服务</div>
        <div class="workText">
          提供专属职业推荐，助力退役军人找到理想工作岗位
        </div>
      </el-card>
      <el-card style="max-width: 480px; cursor: pointer" @click="(router.push('/things'))">
        <img src="../../assets/things.png" style="width: 100%" />
        <div class="workTitle">事务办理</div>
        <div class="workText">提供福利补贴申请、证件办理等一站式服务平台</div>
      </el-card>
    </div>
  </div>
  
  <!-- <div class="work">
    <div class="small-title">最新政策</div>
    <div class="workCard">
      <el-card
        v-for="item in newsList"
        :key="item.id"
        style="max-width: 480px; cursor: pointer"
        body-style="padding:0"
      >
        <img src="../../assets/IMG.png" style="width: 100%" />
        <div class="newsTitle">{{ item.title }}</div>
        <div class="newsText">
          {{ item.text }}
        </div>
        <div class="newsDetail">查看详情 →</div>
      </el-card>
    </div>
  </div>
  <div class="work">
    <div class="small-title">最新岗位</div>
    <div class="workCard">
      <el-card
        v-for="item in worksList"
        :key="item.id"
        style="width: 680px; cursor: pointer"
      >
        <div
          class="newsTitle"
          style="display: flex; justify-content: space-between; padding: 0"
        >
          <div>
            {{ item.workName }}
          </div>
          <div>
            {{ item.salary }}
          </div>
        </div>
        <div class="newsText" style="padding: 0">
          {{ item.workAddress }}
        </div>
        <div style="margin-top: 20px">
          <el-tag
            round
            v-for="item in item.welfare"
            type="primary"
            style="margin-right: 10px"
            >{{ item }}</el-tag
          >
        </div>
        <div class="newsText" style="padding: 0">
          {{ item.requirements }}
        </div>
      </el-card>
    </div>
    <div
      style="
        display: flex;
        justify-content: center;
        margin-top: 80px;
        margin-bottom: 80px;
      "
    >
      <el-button>查看更多岗位</el-button>
    </div>
  </div> -->
</template>

<script setup>
import { useSelectStore } from "../../stores/nav.js";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
/**路由 */
const router = useRouter();
const store = useSelectStore();
const newsList = ref([
  {
    id: "1",
    img: "../../assets/IMG.png",
    title: "2024年退役军人教育培训补贴政策",
    text: "为支持退役军人接受继续教育，提升就业竞争力，特制定本补贴政策巴拉巴拉巴拉",
  },
  {
    id: "2",
    img: "../../assets/IMG.png",
    title: "2024年退役军人教育培训补贴政策",
    text: "为支持退役军人接受继续教育，提升就业竞争力，特制定本补贴政策巴拉巴拉巴拉巴拉吧",
  },
  {
    id: "3",
    img: "../../assets/IMG.png",
    title: "2024年退役军人教育培训补贴政策",
    text: "为支持退役军人接受继续教育，提升就业竞争力，特制定本补贴政策巴拉巴拉巴拉巴拉吧",
  },
]);

const worksList = ref([
  {
    workName: "安保主管",
    workAddress: "北京市 海淀区",
    salary: "8000-12000元/月",
    welfare: ["五险一金", "带薪年假", "专属岗位"],
    requirements:
      "退役军人优先，要求有三年以上安保工作经验，具备良好的组织协调能力",
  },
  {
    workName: "行政专员",
    workAddress: "北京市 海淀区",
    salary: "8000-12000元/月",
    welfare: ["五险一金", "带薪年假", "专属岗位"],
    requirements:
      "退役军人优先，要求有三年以上安保工作经验，具备良好的组织协调能力",
  },
]);
onMounted(() => {
  store.setSelect("首页");
});
</script>

<style scoped>
.bg {
  width: 100%;
  height: 480px;
  background-image: url("../../assets/mainbg.jpg");
}
.title {
  font-size: 32px;
  color: white;
  font-weight: bold;
}
.text {
  margin-top: 30px;
  color: white;
  font-size: 22px;
}
.body {
  margin-left: 100px;
  padding-top: 150px;
}
.work {
  margin-top: 80px;
  margin-bottom: 60px;
}
.small-title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.workTitle {
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px;
}
.workText {
  color: #4b5563;
  margin-top: 20px;
  margin-bottom: 80px;
}
.workCard {
  margin-top: 64px;
  display: flex;
  justify-content: space-around;
}
.newsTitle {
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px;
  padding: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsText {
  color: #4b5563;
  margin-top: 20px;
  padding: 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsDetail {
  margin-top: 20px;
  padding: 0 20px;
  margin-bottom: 40px;
}
</style>
